<template>
	<view v-if="list && list.length > 0" class="cu-card article" :class="props.isCard?'no-card':''">
		<view v-for="(item, index) in list" :key="index" :data-index="index" :data-value="item" @click="handleSelect"
			class="cu-item shadow">
			<view class="content margin-top-sm">
				<image :src="item.coverUrl" mode="aspectFill"></image>
				<view class="desc">
					<view class="name">{{item.title}}</view>
					<view class="remark"> {{item.synopsis}}</view>
					<view class="remark"> {{item.videoTypeName}}</view>
					<view class="flex ">
						<view v-if="item.price==0" class="free"> 免费</view>
						<view v-else class="fee">￥ {{item.price}}</view>
						<view class="read margin-left"> {{item.watchNum}}<text class="margin-left-xs">人观看</text></view>
					</view>
				
					<!-- <view>
					
						<view class="cu-tag bg-red light sm round">热门</view>
						<view class="cu-tag bg-green light sm round">前10名</view>
					</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		useSettingStore
	} from '@/stores/index';
	const setting = useSettingStore();
	const emit = defineEmits(['action']);
	const props = defineProps({
		isCard: {
			type: [Boolean, String],
			default: false
		},
		list: Array
	});
	const handleSelect = (e: any) => {
		emit('action', e.currentTarget.dataset.value);
	};
</script>

<style lang="scss" scoped>
	.cu-item {
		border: 1px solid #efefef;
	}

	.cu-card>.cu-item {
		display: block;
		background-color: #ffffff;
		overflow: hidden;
		border-radius: 10rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 4px 0px rgba(203,203,203,0.5);
		border-radius: 8px;
	}
	.cu-card.article>.cu-item .content>image {
	    width: 136px;
	    height: 100px;
	    margin-right: 20rpx;
	    border-radius: 6rpx;
	}
	.desc{
		.name{
			font-size: 14px;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 800;
			color: #333333;
			line-height: 20px;
			letter-spacing: 1px;
		}
		.remark{
			font-size: 10px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 500;
			color: #666666;
			line-height: 14px;
		}
		.free{
			font-size: 12px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 17px;
		}
		.fee{
			font-size: 12px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FF1919;
			line-height: 17px;
		}
		.read{
			font-size: 10px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			line-height: 14px;
		}
	}
	
</style>
